﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>创建</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link type="text/css" href="../Layui/css/layui.css" rel="stylesheet" media="all">
</head>
<body>
    <div style=" margin-top:20px;"></div>
    <div id="el">
        <div class="layui-row">
            <div class="layui-col-xs7" align="right">
                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入课程名称" class="layui-input" style="width:15rem" v-model="CourseName">
            </div>
            <div class="layui-col-xs5" align="left">
                <button class="layui-btn" style="margin-left:2rem" onclick="vm.loadClassInfo()">搜索</button>
            </div>
        </div>
        <div class="layui-form" align="center">
            <table class="layui-table " style="width: 95%;">
                <thead>
                    <tr>
                        <th>课程名称</th>
                        <th>学员数量</th>
                        <th>扣课数量</th>
                        <th>开始年龄</th>
                        <th>结束年龄</th>
                        <th>是否约课</th>
                        <th>是否试听</th>
                        @*<th>约课数量</th>
                            <th>试听数量</th>*@
                        <th>备注</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <template v-if="ClassList">
                        <tr v-for="(item,index) in ClassList">

                            <td>{{item.CourseName}}</td>
                            <td>{{item.StuNumber}}</td>
                            <td>{{item.Dperiod}}</td>
                            <td>{{parseInt(item.StartMonth/12)}}岁{{item.StartMonth%12}}月</td>
                            <td>{{parseInt(item.EndMonth/12)}}岁{{item.EndMonth%12}}月</td>
                            <td>
                                <template v-if="item.IsOrder==0">
                                    不可约
                                </template>
                                <template v-if="item.IsOrder==1">
                                    可约
                                </template>
                            </td>
                            <td>
                                <template v-if="item.IsTentative==0">
                                    不可试听
                                </template>
                                <template v-if="item.IsTentative==1">
                                    可试听
                                </template>
                            </td>
                            @*<td>{{item.MakeNumber}}</td>
                                <td>{{item.AuditionsNumber}}</td>*@
                            <td>{{item.Remark}}</td>
                            <td>
                                <template v-if="item.state==0">
                                    禁用
                                </template>
                                <template v-if="item.state==1">
                                    启用
                                </template>
                            </td>
                            <td>
                                <a class="layui-btn layui-bg-blue layui-btn-xs" v-on:click="openEdit(item.id)">编辑</a>
                                <a class="layui-btn layui-bg-red layui-btn-xs" v-on:click="delClass(item.id)">删除</a>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </div>
    <!--模仿bootstrap的模态框-->
    <div id="Edit" style="display: none;">
        <!--可再建编辑表单-->
        <div class="layui-col-md12 layui-form" id="edit">
            <div style="margin-left:6rem;margin-top:2rem">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label"><span style="color:red">*</span><span style="margin-left:0.5rem">课程名称</span></label>
                        <div class="layui-input-inline">
                            <input type="text" id="_CourseName" name="_CourseName" placeholder="请输入课程名称" class="layui-input" value="" v-model="Course.CourseName">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label"><span style="color:red">*</span><span style="margin-left:0.5rem">学员人数</span></label>
                        <div class="layui-input-inline">
                            <input type="number" id="_StuNumber" name="_StuNumber" placeholder="请输入人数" class="layui-input" value="" v-model="Course.StuNumber">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label"><span style="color:red">*</span><span style="margin-left:0.5rem">扣课时数</span></label>
                        <div class="layui-input-inline">
                            <input type="number" id="_Dperiod" name="_Dperiod" placeholder="请输入时数" class="layui-input" value="" v-model="Course.Dperiod">
                        </div>
                    </div>
                </div>
                @*<div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label"><span style="color:red">*</span><span style="margin-left:0.5rem">约课数&nbsp;&nbsp;&nbsp;</span></label>
                            <div class="layui-input-inline">
                                <input type="number" id="_MakeNumber" name="_MakeNumber" placeholder="请输入约课数" class="layui-input" value="" v-model="Course.MakeNumber">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label"><span style="color:red">*</span><span style="margin-left:0.5rem">试听数&nbsp;&nbsp;&nbsp;</span></label>
                            <div class="layui-input-inline">
                                <input type="number" id="_AuditionsNumber" name="_AuditionsNumber" placeholder="请输入试听数" class="layui-input" value="" v-model="Course.AuditionsNumber">
                            </div>
                        </div>
                    </div>*@


                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label"><span style="color:red">*</span><span style="margin-left:0.5rem">起始年龄</span></label>
                        <div class="layui-input-inline">
                            <input type="number" id="Ssui" placeholder="请输入多少岁" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">岁</div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="number" id="Syue" placeholder="请输入月" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">月</div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label"><span style="color:red">*</span><span style="margin-left:0.5rem">终止年龄</span></label>
                        <div class="layui-input-inline">
                            <input type="number" id="Esui" placeholder="请输入多少岁" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">岁</div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="number" id="Eyue" placeholder="请输入月" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">月</div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label"><span style="margin-left:0.5rem">约课</span></label>
                        <div class="layui-input-inline">
                            <input type="checkbox" id="IsOrder" name="IsOrder" lay-skin="switch" lay-filter="IsOrder" title="开关" value="1">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label"><span style="margin-left:0.5rem">试听</span></label>
                        <div class="layui-input-inline">
                            <input type="checkbox" id="IsTentative" name="IsTentative" lay-skin="switch" lay-filter="IsTentative" title="开关" value="1">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label"><span style="color:red">*</span><span style="margin-left:0.5rem">开启状态</span></label>
                        <div class="layui-input-inline">
                            <input type="checkbox" id="state" name="state" lay-skin="switch" lay-filter="state" title="开关" value="1">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注信息</label>
                    <div class="layui-input-block">
                        <textarea name="_Remark" id="_Remark" placeholder="请输入内容" class="layui-textarea" style="min-height:100px;min-width:300px;width: 32.2rem;" v-model="Course.Remark">{{Course.Remark}}</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" style="margin-left:12rem;" onclick="vmEdit.confirm()">提交</button>
                        @*<button type="button" class="layui-btn layui-btn-primary" onclick="parent.HideModal('popEdit');return false;">关闭</button>*@
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../Htc/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="../Htc/vue.min.js"></script>
    <script type="text/javascript" src="../Layui/layui.js"></script>
    <script>
        layui.config({
            base: '../Layui/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use('index');
        //Demo
        layui.use(['form', 'layer', 'laydate', 'element'], function () {
            var laydate = layui.laydate;
            var form = layui.form;
            var element = layui.element;
            layer = layui.layer

            //执行一个laydate实例
            laydate.render({
                elem: '#BirdDate' //指定元素
            });
            //监听提交
            form.on('switch(state)', function (data) {
                if (this.checked) {
                    vmEdit.Course.state = 1;
                }
                else {
                    vmEdit.Course.state = 0;
                }
            });
            //监听提交
            form.on('switch(IsTentative)', function (data) {
                if (this.checked) {
                    vmEdit.Course.IsTentative = 1;
                }
                else {
                    vmEdit.Course.IsTentative = 0;
                }
            });
            //监听提交
            form.on('switch(IsOrder)', function (data) {
                if (this.checked) {
                    vmEdit.Course.IsOrder = 1;
                }
                else {
                    vmEdit.Course.IsOrder = 0;
                }
            });
        });
    </script>
    <script>
        var vm = new Vue({
            el: '#el',
            data: {
                ClassList:[],
                CourseName: '',
                EditId:''

            },
            created: function () {
                this.loadClassInfo()
            },
            methods: {
                openEdit: function (id) {
                    vmEdit.loadInfo(id);
                    layui.use(['layer'], function () {
                        var layer = layui.layer, $ = layui.$;
                        layer.open({
                            type: 1,//类型
                            area: ['52.1rem', '42.5rem'],//定义宽和高
                            title: '编辑课程',//题目
                            shadeClose: false,//点击遮罩层关闭
                            content: $('#Edit')//打开的内容
                        });
                    })
                },
                delClass: function (id) {
                var act = "1=1";
                    if (id) {
                    act += "&id=" + id;
                }
            $.ajax({
                    data: '',
                    url: "../Course/BaseCourseDetailList/DelClass?" + act+"&vid=" +@ViewBag.id+'&keyCode=@ViewBag.KeyCode',
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        if (data.code == "0000") {
                            layer.msg("删除成功！");
                            vm.loadClassInfo();
                        }
                        else if (data.code == "0001") {
                            layer.msg("您没有权限！");
                        }
                        else {
                            layer.msg("删除失败！");
                        }
                    }
                })
            },
                loadClassInfo: function () {
                    var act = "1=1";
                    if (this.CourseName) {
                        act += "&CourseName=" + this.CourseName;
                    }
                    act += "&ClassId=" +@ViewBag.id;
                    $.ajax({
                        data: '',
                        url: "../Course/BaseCourseDetailList/ClassInfo?" + act+"&vid=" +@ViewBag.id+'&keyCode=@ViewBag.KeyCode',
                        type: "post",
                        dataType: "json",
                        success: function (data) {
                            if (data.code == "0000") {
                                vm.ClassList = data.data;
                            }
                            else if (data.code == "0001") {
                                layer.msg("您没有权限！");
                            }
                            else {
                                layer.msg("数据为空！");

                            }
                        }
                    })

                },
            }
        })
    </script>
    <script>
        var vmEdit = new Vue({
            el: '#edit',
            data: {
                Course: {
                    id:'',
                    ClassId: '',//课程系列id
                    CourseName: '',//课程名称
                    StuNumber: '',//课程学员数量
                    Dperiod: '',//课程一次扣课数量
                    StartMonth: '',//学员开始月龄
                    EndMonth: '',//学员结束月龄
                    IsOrder: 1,//是否可约课，0，不可约，1 可约，默认可以约
                    IsTentative: 1,//是否可试听，0不可试听，1可试听，默认可试听
                    MakeNumber: '',//约课数量（排队）
                    AuditionsNumber: '',//试听数量
                    Remark: '',//备注
                    state: 1,//状态（0禁用，1启用)
                }
            },
            created: function () {
            },
            methods: {
                confirm: function () {
                    if ($("#_CourseName").val() == '') {
                        $("#_CourseName").focus();
                        this.tips("_CourseName", "请输入课程名称");
                        return;
                    }
                    if ($("#_StuNumber").val() == '') {
                        $("#_StuNumber").focus();
                        this.tips("_StuNumber", "请输入学员人数");
                        return;
                    }
                    if ($("#_Dperiod").val() == '') {
                        $("#_Dperiod").focus();
                        this.tips("_Dperiod", "请输入扣课时数");
                        return;
                    }
                    if ($("#_MakeNumber").val() == '') {
                        $("#_MakeNumber").focus();
                        this.tips("_MakeNumber", "请输入约课数");
                        return;
                    }
                    if ($("#_AuditionsNumber").val() == '') {
                        $("#_AuditionsNumber").focus();
                        this.tips("_AuditionsNumber", "请输入试听数");
                        return;
                    }

                    if ($("#Ssui").val() == '') {
                        $("#Ssui").focus();
                        this.tips("Ssui", "请输入开始岁数");
                        return;
                    }
                    if ($("#Syue").val() == '' || $("#Syue").val()< 1) {
                        $("#Syue").focus();
                        this.tips("Syue", "请输入开始月份并大于1");
                        return;
                    }
                    else {
                        Ssum = (parseInt($("#Ssui").val()) * 12) + parseInt($("#Syue").val());
                        this.Course.StartMonth = Ssum;
                    }
                    //if ($("#Ssui").val() == '' && $("#Ssui").val() > 1 && $("#Syue").val() == '' && $("#Syue").val() > 1) {
                    //    $("#Ssui").focus();
                    //    this.tips("Ssui", "必须填写开始岁数并大于1");
                    //    return;
                    //}
                    //else {
                    //    Ssum = (parseInt($("#Ssui").val()) * 12) + parseInt($("#Syue").val());
                    //    this.Course.StartMonth = Ssum;
                    //}

                    if ($("#Esui").val() == '') {
                        $("#Esui").focus();
                        this.tips("Esui", "请输入结束岁数");
                        return;
                    }
                    if ($("#Eyue").val() == '' || $("#Eyue").val() < 1) {
                        $("#Eyue").focus();
                        this.tips("Eyue", "请输入结束月份并大于1");
                        return;
                    } else {
                        Esum = (parseInt($("#Esui").val()) * 12) + parseInt($("#Eyue").val());
                        this.Course.EndMonth = Esum;
                    }

                    //if ($("#Esui").val() == '' && $("#Esui").val() > 1 && $("#Eyue").val() == '' && $("#Eyue").val() > 1) {
                    //    $("#Esui").focus();
                    //    this.tips("Esui", "必须填写结束岁数并大于1");
                    //    return;
                    //}
                    //else {
                    //    Esum = (parseInt($("#Esui").val()) * 12) + parseInt($("#Eyue").val());
                    //    this.Course.EndMonth = Esum;
                    //}


                    if (Ssum > Esum) {
                        $("#Esui").focus();
                        this.tips("Esui", "必须开始年龄不能大于结束年龄");
                        return;
                    }
                    this.CourseUpdate();
                },
                tips: function (id, info) {
                    layui.use(['form', 'layer'], function () {
                        var form = layui.form;
                        layer = layui.layer
                        layer.tips(info, "#" + id, {
                            time: 3000,
                            tips: [2, "#4794ec"],
                            tipsMore: true,
                        });
                    });
                },
                CourseUpdate: function () {
                    var data = {
                        id: vmEdit.Course.id,
                        //ClassId:@ViewBag.id,//课程系列id
                        CourseName: vmEdit.Course.CourseName,//课程名称
                        StuNumber: vmEdit.Course.StuNumber,//课程学员数量
                        Dperiod: vmEdit.Course.Dperiod,//课程一次扣课数量
                        StartMonth: vmEdit.Course.StartMonth,//学员开始月龄
                        EndMonth: vmEdit.Course.EndMonth,//学员结束月龄
                        IsOrder: vmEdit.Course.IsOrder,//是否可约课，0，不可约，1 可约，默认可以约
                        IsTentative: vmEdit.Course.IsTentative,//是否可试听，0不可试听，1可试听，默认可试听
                        MakeNumber: vmEdit.Course.MakeNumber,//约课数量（排队）
                        AuditionsNumber: vmEdit.Course.AuditionsNumber,//试听数量
                        Remark: vmEdit.Course.Remark,//备注
                        state: vmEdit.Course.state,//状态（0禁用，1启用)
                        //LeagueId: 1,
                        //CreateId: 1
                    }
                    $.ajax({
                        data:'',
                        url: "../Course/BaseCourseDetail/UpdateClass?v=" + JSON.stringify(data) +"&id=" +@ViewBag.id+'&keyCode=@ViewBag.KeyCode',
                        type: "post",
                        dataType: "json",
                        success: function (data) {
                            if (data.code == "0000") {
                                layer.msg("提交成功！");
                                setTimeout(function () {
                                    //var index = parent.layer.getFrameIndex(window.name);
                                    //parent.layer.close(parent.layer.index);
                                    layui.layer.closeAll();
                                }, 3000);
                            }
                            else if (data.code == "0009") {
                                layer.msg("该课程已存在！");
                            }
                            else if (data.code == "0001") {
                                layer.msg("您没有权限！");
                            }
                            else {
                                layer.msg("添加失败！");
                            }
                        }
                    })
                },
                loadInfo: function (id) {
                    var act = "1=1";
                    if (id) {
                        act += "&id=" + id;
                    }
                    $.ajax({
                        data: '',
                        url: "../Course/BaseCourseDetailList/ClassInfo?" + act +"&vid=" +@ViewBag.id+'&keyCode=@ViewBag.KeyCode',
                        type: "post",
                        dataType: "json",
                        success: function (data) {
                            if (data.code == "0000") {
                                let obj = data.data[0];
                                for (let i in obj) {
                                    if (i == "StartMonth") {
                                        vmEdit.Course[i] = obj[i];
                                        $('#Ssui').val(parseInt(obj[i] / 12));
                                        $('#Syue').val(parseInt(obj[i] % 12));
                                    }
                                    else if (i == "EndMonth") {
                                        vmEdit.Course[i] = obj[i];
                                        $('#Esui').val(parseInt(obj[i] / 12));
                                        $('#Eyue').val(parseInt(obj[i] % 12));
                                    }
                                    else if(i == "IsOrder") {
                                        vmEdit.Course[i] = obj[i];
                                        $("input[name=IsOrder][value=1]").attr("checked", obj[i] == 1 ? true : false);
                                        layui.form.render();
                                     }
                                    else if (i == "IsTentative") {
                                        vmEdit.Course[i] = obj[i];
                                        $("input[name=IsTentative][value=1]").attr("checked", obj[i] == 1 ? true : false);
                                        layui.form.render();
                                    }
                                     else if (i == "state") {
                                        vmEdit.Course[i] = obj[i];
                                        $("input[name=state][value=1]").attr("checked", obj[i] == 1 ? true : false);
                                        layui.form.render();
                                    }
                                    else {
                                        vmEdit.Course[i] = obj[i];
                                    }
                                };
                            }
                            else if (data.code == "0001") {
                                layer.msg("您没有权限！");
                            }
                            else if (data.code == "0009") {
                                layer.msg("数据为空！");
                            }
                            else {
                                function DoDisp(id) {

                                }
                                layer.msg("数据为空！");

                            }
                        }
                    })
                }
            }
        })
    </script>
</body>
</html>